<template>
  <ItemMusicTop :canshu="playLists"></ItemMusicTop>
  <ItemMusicList :canshu2="musicLists" :subscribedCount="playLists.subscribedCount"></ItemMusicList>
</template>

<script>
import {getAllMusic, getMusicItemList} from "../api/itemmusic";
import ItemMusicTop from "../components/item/ItemMusicTop";
import ItemMusicList from "../components/item/ItemMusicList";

export default {
  name: "ItemMusic",
  components: {ItemMusicList, ItemMusicTop},
  data() {
    return {
      // 歌单详情页数据
      playLists: {},
      // 歌单中的歌曲
      musicLists: []
    }
  },
  methods: {
    // 获取歌单详情
    async getMucicMessage() {
      // console.log(this.$route.query)
      let res = await getMusicItemList(this.$route.query)
      // console.log(res)
      if (res.data.code == 200) {
          this.playLists = res.data.playlist
        // sessionStorage.setItem('itemDetail', JSON.stringify(this.playLists))
      }
    },
    // 获取对应歌单的歌曲
    async getThisMusics() {
      // 整理参数
      let data = {
        id: this.$route.query.id,
        limit: 50,
        offset: 10
      }
      let res = await getAllMusic(data)
      // console.log(res)
      if (res.data.code == 200) {
        this.musicLists = res.data.songs
      }
    }
  },
  mounted() {
    this.getMucicMessage()
    this.getThisMusics()
  }
}
</script>

<style scoped>

</style>